<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="myCompontent">
   <span> <div>共{{total}}个代办事项,{{nn}}个已完成,{{total-nn}}个未完成</div> </span>
    </script>
    <script>
        window.onload=function() {
            Vue.component("todosList", {
                props:['total','nn'],
                template:'#myCompontent'
            }),

           new Vue({
               el: '#app-1',
               methods: {
                   addthing: function () {
                       this.todos.push({name: this.thing, done: false})

               },
                   swithting: function (index) {
                  this.todos[index].done=!this.todos[index].done;
               }
                   },
                data: {
                    thing: "",
                    todos: [
                        {name: '吃饭', done: false},
                        {name: '睡觉', done: false},
                        {name: '哈哈哈', done: true}
                    ]
                },
               computed: {
              nn:function(){
               var count=0;
                   for(var i=0;i<this.todos.length;i++){
                       if(this.todos[i].done){
                           count++;
                       }
                   }
                  return count;
                       }
               }

               });
        }

    </script>
    <style>
        .del{text-decoration:line-through}
    </style>
</head>
<body>
<div id="app-1">
    <input type="text" v-model="thing"/>
    <button v-on:click="addthing" @keyup.enter="addthing">添加</button><br>
    <div v-for="(todo, index) in todos">
        <input type="checkbox" v-bind:checked="todo.done" @click="swithting(index)"  /> {{index}}.
        <span v-bind:class="{del:todo.done}">
            {{todo.name}}
        </span>
    </div>
    <todos-list v-bind:total="todos.length" :nn="nn"></todos-list>
</div>
</body>
</html>
